<template>
	<view class="content">
		<view style="margin-top: 10rpx;">
			<up-search :show-action="true" actionText="搜索" v-model="searchValue" borderColor="#098CC0"
				@custom="goSearch"></up-search>
		</view>
		<up-tabs :list="firstLevelCategory" @click="changeTab"></up-tabs>
		<view style="margin-top: 10px;">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in homeAdv" :key="index">
					<view class="swiper-item">
						<image :show-loading="true" :src="$img+item.pic" style="height: 140px;width: 380px;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<up-notice-bar text="别报错了,我会崩溃的"></up-notice-bar>
		</view>
		<view class="goods_list">
			<view>
				<uni-row>
					<uni-col :span="12" v-for="(item,index) in skuList"
						style="margin-top: 10px;background-color: white;padding-block: 10px;">
						<sku-card :skuInfo="item"></sku-card>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="同意" title="警告"
				content="移动端还处于初始阶段,为了更好的体验,请前往电脑端访问!" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		getSkuListByAdvice
	} from '../../api/goods'
	import {
		getCategoryByParent
	} from '../../api/category'
	import {
		getHomeAdv
	} from '../../api';
	import SkuCard from '../../components/commodity/SkuCard.vue';

	const alertDialog = ref(null);
	let skuSearchDTO = reactive({
		pageNum: 1,
		pageSize: 10
	})

	let currentTab = ref({
		name: '推荐',
		id: '0'
	})
	let firstLevelCategory = ref([]);
	const functionList = reactive([{
		title: '服装',
		iamge: '',
	}])
	let list1 = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	let skuList = ref([])
	let homeAdv = ref([])
	let searchValue = ref('')

	function changeTab(item) {
		currentTab.value = {
			id: item.id,
			name: item.name
		}
	}

	function getSkuList() {
		getSkuListByAdvice(skuSearchDTO.pageNum, skuSearchDTO.pageSize).then(res => {
			skuList.value = res.data
		})
	}

	function goSearch(value) {
		console.log("跳转")
		uni.navigateTo({
			url: '/pages/search/search?searchValue=' + searchValue
		})
	}

	function getHomeAdvFun() {
		getHomeAdv().then(res => {
			homeAdv.value = res.data
		})
	}

	function dialogConfirm() {
		console.log('点击确认')
	}

	function dialogClose() {
		console.log('点击关闭')
	}

	function open() {
		alertDialog.value.open()
	}

	function getFirstLevelCategory() {
		getCategoryByParent(0).then(res => {
			let advice = {
				name: '推荐',
				id: '0'
			}
			res.data.unshift(advice)
			firstLevelCategory.value = res.data
		})
	}
	onMounted(() => {
		getFirstLevelCategory()
		getSkuList()
		getHomeAdvFun()
		open()
	})
</script>

<style lang="scss">
	.content {
		padding: 10px;
		.goods_list {
			.list-box {
				background-color: white;
			}
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */


	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>